<template>
	<div class="register">
		<h2>注册账号</h2>
		<div class="web-team-login-right-center">
			<label class="web-team-login-right-center-label">
				<span>账号:</span>
				<el-input v-model="data.email" @keypress.native.enter="loginClick" type="text" placeholder="请输入邮箱"  />
			</label>
			<label class="web-team-login-right-center-label">
				<span>验证码:</span>
				<el-input v-model="data.code" @keypress.native.enter="loginClick" type="text" placeholder="请输入验证码"  />
				<span class="label-code" @click="codeClick">{{data.codeText}}</span>
			</label>
			<label class="web-team-login-right-center-label">
				<span>昵称:</span>
				<el-input v-model="data.nickName" @keypress.native.enter="loginClick" type="text" placeholder="请输入昵称"  />
			</label>
			<label class="web-team-login-right-center-label">
				<span>密码:</span>
				<el-input v-model="data.password" @keypress.native.enter="loginClick" type="password" placeholder="请输入密码"  />
			</label>
			<label class="web-team-login-right-center-label">
				<span>重复密码:</span>
				<el-input v-model="data.againPassword" @keypress.native.enter="loginClick" type="password" placeholder="请再次输入密码"  />
			</label>
			
			
			
			<el-button type="primary" @click="registerClick" :loading="loading">{{data.registerText}}</el-button>
		</div>
		<div class="web-team-login-right-register">
			<span>已有账号？<router-link to="/login">去登录</router-link></span>
		</div>
		
	</div>
</template>

<script lang="ts" setup>
	import {ref,reactive} from 'vue'
	import { ElMessage} from 'element-plus'
	import { useRouter } from 'vue-router'
	import {useCode} from './main/useCode'
	import {HttRegister} from '../public/http'
	
	const router = useRouter();
	
	
	let loading = ref(false)
	let data = reactive({
		codeText:'发送验证码',
		registerText:'注册',
		email:"",
		code:"",
		nickName:"",
		password:"",
		againPassword:"",
	})
	const codeClick = ()=>{
		if(data.codeText !== '发送验证码'){
			return
		}
		useCode(data.email,(res:any)=>{
			data.codeText = res
		},'1')
	}
	
	
	const registerClick = ()=>{
		if(!data.email){
			ElMessage({
			    message: '请输入邮箱!',
			    type: 'warning',
			})
		}else if(!data.code){
			ElMessage({
			    message: '请输入验证码!',
			    type: 'warning',
			})
		}else if(!data.nickName){
			ElMessage({
			    message: '请输入昵称!',
			    type: 'warning',
			})
		}else if(!data.password){
			ElMessage({
			    message: '请输入密码!',
			    type: 'warning',
			})
		}else if(data.password!==data.againPassword){
			ElMessage({
			    message: '两次密码不一致!',
			    type: 'warning',
			})
		}else{
			loading.value = true
			data.registerText = "注册中..."
			HttRegister({
				email:data.email,
				code:data.code,
				nickName:data.nickName,
				password:data.password,
			}).then((res:any)=>{
				loading.value = false
				data.registerText = "注册"
				if(res.code === 200){
					ElMessage({
					    message: '恭喜您注册成功，赶快登录吧!',
					    type: 'success',
					})
					router.push('/login')
					
					return;
				}
				
				ElMessage({
				    message: res.message,
				    type: 'success',
				})
			})
		}
	}
</script>

<style lang="scss">
	.register {
		width: 100%;
		height: 100%;
		padding: 10px 30px 20px 30px;
		box-sizing: border-box;
		vertical-align: top;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		h2 {
			text-align: center;
			font-size: 25px;
			letter-spacing: 1px;
		}

		.web-team-login-right-center {
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.web-team-login-right-center-label{
				
				width: 100%;
				height: 45px;
				border: 0;
				border-bottom: 1px solid #e5e5e5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
				span{
					display: inline-block;
					font-size: 16px;
					color: #383838;
					width: 150px;
				}
				input {
					display: inline-block;
					height: 45px;
					color: #383838;
					border: 0;
					
				}
				&:nth-of-type(2){
					input{
						padding-left: 35px;
					}
				}
				
				.label-code{
					width: 160px;
					color: #3a8ee6;
					cursor: pointer;
				}
			}

			button {
				width: 100%;
				height: 45px;
				margin: 0 auto;
				font-size: 18px;
				letter-spacing: 2px;
				color: white;
				margin-top: 20px;
			}

			.forget-password {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 10px;

				a {
					color: rgb(58, 142, 230);
				}


			}
			.web-team-login-right-center-code{
				width: 100%;
				height: 40px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
				span{
					width: 150px;
					height: 100%;
					line-height: 40px;
					font-size: 13px;
					text-align: center;
					display: inline-block;
					color: white;
					background-color: rgb(58, 142, 230);
					cursor: pointer;
				}
			}
		}

		.web-team-login-right-register {
			margin-top: 30px;
			span{
				font-size: 14px;
			}
			a {
				color: #3a8ee6;
			}
		}

		.web-team-login-right-info {
			text-align: center;
			font-size: 15px;
			letter-spacing: 1px;
			margin-top: 30px;
		}

	}
</style>
